<template>
	<div class="flex_row_center m5 lb_root">
		<div :style='{ backgroundColor: color }' class="lb_point"></div>
		<label class="ml5">{{ ctx.name }}</label>
	</div>
</template>

<script setup lang="ts">

import { defineProps, ref, watch } from 'vue'

interface Ctx {
	value: boolean;
	name: string;
}

const ctx = defineProps<Ctx>();
const color = ref('gray');

function update() {
	if (ctx.value) {
		color.value = 'red';
	} else {
		color.value = 'gray';
	}
}

watch(ctx, () => {
	update();
});

update();

</script>


<style scoped>
.lb_point {
	width: 25px;
	height: 25px;
	border-radius: 25px;
}

.lb_root {
	border: 1px solid #ccc;
	padding: 3px;
	border-radius: 5px;
}
</style>
